<template>
    <div class="all">
        <div class="left-box">
            <div class="top-title">
                <MachineNumber></MachineNumber>
            </div>
            <router-view></router-view>
        </div>
        <div class="right-box">
            <div class="user-info" @click="showAlert=true">
                <div class="top" style="color:white;">
                    <img src="../assets/QQ截图20221215110308.png" height="74" width="80"/>吴隆林
                </div>
                <span class="top-right">单号:101065456420220803</span>
                <div class="content" style="height: 42%">
                    <div class="content-left">
                        <img src="../assets/QQ截图20221215114257.png"/>
                        <p>结账信息</p>
                    </div>
                    <div class="content-right">
                        <p>
                            <span>油焖大虾</span>
                            <span class="span1">￥50.00</span>
                        </p>
                        <p>
                            <span>油焖大虾</span>
                            <span class="span1">￥50.00</span>
                        </p>
                        <p>
                            <span>油焖大虾</span>
                            <span class="span1">￥50.00</span>
                        </p>
                    </div>
                </div>
                <div class="bottom" style="height: 43%">
                    <div class="bottom-left">
                        <img src="../assets/QQ截图20221215141952.png "/>
                    </div>

                    <div class="bottom-right">
                        <p class="name">李丽</p>
                        <div style="height: 55px;line-height: 55px">支付金额:<span class="span2"
                                                                               style="font-size: 37px;color: rgb(255,78,0)">￥150.00</span>
                        </div>
                        <div style="margin-bottom: 15px;">我的余额:<span class="span2">￥100.00</span></div>
                        <div>我的补贴:<span class="span2">￥100.00</span></div>
                    </div>
                </div>
            </div>
            <div class="user-info-bottom">
                <menu-icon></menu-icon>
            </div>
        </div>
    </div>
</template>

<script>
    import MenuIcon from "@/components/include/MenuIcon";
    import MachineNumber from "@/components/include/MachineNumber"
    import WindowAlert from "@/components/include/WindowAlert";


    export default {
        name: "SystemIndex",
        components: {WindowAlert, MenuIcon,  MachineNumber},
        data() {
            return {
                // 定额
                quotaPrice: 0,
                quotaAlert: false,
                showAlert: true,
                iconList: [{icon: 'assets/a.png', title: "收银", url: '/System/Account'}]
            }
        }
    }
</script>

<style scoped>
    .all {
        height: 100vh;
    }

    .top-title {
        background: gray;
        height: 80px;
    }

    .left-box {
        width: 60%;
        height: 100vh;
        float: left;
        background: rgb(237, 243, 249);
    }

    .right-box {
        width: 40%;
        height: 100vh;
        float: left;
        background: #697c8c;
    }

    .user-info {

        height: 520px;
        background-color: rgb(13, 41, 67);
    }

    .top {

        display: inline-block;
        height: 72px;
    }

    .top img {
        float: left;
        margin-left: 25px;
    }

    .top-right {
        margin-right: 20px;
        margin-top: 20px;
        float: right;
        color: white;

    }

    .content-left {
        text-align: center;

        float: left;
        width: 49.4%;
        height: 220px;
        background-color: rgb(10, 33, 54);
    }

    .content-left img {
        margin-top: 70px;

    }

    .content-left p {
        color: rgb(119, 126, 134);
    }

    .content-right {
        float: right;
        width: 49.4%;
        height: 220px;
        background-color: rgb(10, 33, 54);
    }

    .content-right p {
        margin-left: 20px;
        margin-top: 20px;
        color: white;

    }

    .bottom img {
    }

    .span1 {
        margin-right: 20px;
        float: right;
    }

    .span2 {
        margin-right: 20px;
        float: right;
    }

    .name {
        margin-top: 30px;
        margin-bottom: 20px;
        font-size: large;
    }

    .bottom-right {
        float: right;
        width: 70%;
        height: 100%;
        display: inline-block;
        color: white;
    }

    .bottom-left {
        width: 30%;
        height: 100%;
        display: inline-block;
    }

    .bottom-left img {
        width: 80%;
        float: left;
        margin-top: 30px;
        margin-left: 18px;
    }

    .user-info-bottom {
        height: calc(100vh - 520px);
        background-color: rgb(10, 41, 64);
    }


</style>